<template>
	<view class="base_body">
		<view class="sticky">
			<DropDown  @getForm='getForm'/>
		</view>
		<map :markers="markers" id="mapId" ref="mapId" style="width: 750rpx; height: 90%;" :latitude="latitude" :longitude="longitude" :scale='scale' @callouttap='callouttap'>
			<cover-view slot="callout">
				<block v-for="(item,index) in markers" :key="index" >
					<cover-view class="customCallout" :marker-id="item.id"  >
						<cover-view class="content" @click="title(item)">
							{{item.title}}
						</cover-view>
					</cover-view>
				</block>
			</cover-view>
		</map>

		<uni-popup ref="popup" type="bottom" :safe-area='false' @touchmove.stop.prevent="">
			<scroll-view scroll-y="true" style="height: 500rpx;background: #fff;border-radius: 32rpx 32rpx 0 0 ;">
				<Work :workList='joblist' :total='total'  :userInfos='userInfo'/></Work>
			</scroll-view>
		</uni-popup>
	</view>
</template>

<script>
	import * as index from '@/api/index.js'
	import * as user from '@/api/user.js'
	import DropDown from '@/components/home/DropDown/index.vue'
	import Work from '@/components/home/work/index.vue'
	export default {
		components: {
			DropDown,
			Work
		},	
		props:{
		},
		data() {
			return {
				userInfo:{},
				total:'',
				scale: 9,
				latitude: 35.422116,
				longitude: 116.59548,
				markers: [],
				show: false,
				joblist: [],
				newType: 1,
					form: {
						member_id: '',
						drving_id: '',
						age_id: '',
						welfare_id: '',
						salary_id: '',
						position_id2: '',
						position_id: '',
						areas_pid: 1,
						areas_id: '',
						secondary: '',
						is_index: '',
						refresh_time:'',//更新时间
					},
				// page: {
				// 	page: 0,
				// 	pages: 100
				// }
				// _mapContext: ''
			}
		},
		onLoad() {
			this.getCitys()
			if(uni.getStorageSync('token')){
				this.getUserInfo()
			}
		},
		onReady() {
			this._mapContext = uni.createMapContext('mapId', this)

		},
		// onShareAppMessage(res) {
		// 	return {
		// 		title: this.list.company.name, //分享标题
		// 		imageUrl: '',
		// 		path: 'src/views/mapSearch/mapSearch'
		// 	}
		// },
		methods: {
			getCitys() {
				index.getCity(this.form).then(res => {
					res.data.forEach((item,index) => {
						item.callout = {
							content: item.address+'\n'+'共'+item.num+'个需求',
							display: 'ALWAYS',
							textAlign: 'center',
							bgColor: '#ffffff',
							padding: 10,
							borderRadius: 14
						}
						item.ids = item.id
						item.joinCluster = true
						item.width = 25
						item.height = 30
						item.id = index
						// item.id = Number(item.id)
						item.iconPath = 'https://mp.wanhedashuju.com/uploads/20220622/6838e595ea44cb9d11800c0a59079afc.png'

					})
					this.markers=res.data
				})
			},
			
			callouttap(e) {
				index.idGetPosotion({
					pids: this.markers[e.detail.markerId].ids
				}).then(res => {
					this.joblist = res.data.data
					this.total = res.data.total
					this.$refs.popup.open()
				}).catch(err => {
					console.log(err);
				})
			},
			open() {
			},
			close() {
				// this.show = false
			},
			tap(e) {
				console.log(e);
			},
			//筛选条件
		getForm(e) {
			this.form.areas_id = e.areas_id
			this.form.age_id = e.age_id
			this.form.drving_id = e.drving_id
			this.form.position_id = e.position_id
			this.form.position_id2 = e.position_id2
			this.form.salary_id = e.salary_id
			this.form.secondary = e.secondary
			this.form.gender = e.gender
			this.form.refresh_time = e.refresh_time
			this.form.welfare_id = e.welfare_id.join(',')
			this.getCitys()
		},
		getUserInfo(){
			user.getUserInfo({type:0}).then(res=>{
				this.userInfo = res.data
			})
		}
		}
	}
</script>

<style  scoped>
	.base_body {
		width: 100%;
		height: 100%;
		position: absolute;

	}
	.sticky{
		position: sticky;
		top: 0;
		background: #F5F5F5;
		z-index: 999;
	}
	/* 水平，垂直居中 */
	.base_all_center {
		justify-content: center;
		align-items: center;
	}

	/* 垂直居中 */
	.base_center_vertical {
		display: flex;
		align-items: center;
	}

	/* 水平居中 */
	.base_center_horizontal {
		display: flex;
		justify-content: center;
	}

	/* 垂直布局 */
	.base_column {
		display: flex;
		flex-direction: column;
	}

	/* 横向布局 */
	.base_row {
		display: flex;
		flex-direction: row;
	}

	/* 基础dialog */
	.base_dialog {
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0px;
		background: rgba(0, 0, 0, 0.5);
	}

	/* *************************************** */
	.customCallout {
		box-sizing: border-box;
		background-color: #fff;
		border: 1px solid #ccc;
		border-radius: 30px;
		width: 150px;
		height: 40px;
		display: inline-flex;
		padding: 5px 20px;
		justify-content: center;
		align-items: center;
	}

	.content {
		flex: 0 1 auto;
		margin: 0 10px;
		font-size: 14px;
	}

	.header {
		width: 56rpx;
		height: 4rpx;
		background: #BDBDBD;
		border-radius: 2rpx;
		opacity: 1;
		text-align: center;
		margin-top: 14rpx;
	}

	.title {
		display: flex;
		flex-direction: column;
		justify-content: center;
		padding: 0 24rpx;
		height: 96rpx;
		border-radius: ;
		opacity: 1;
		font-size: 32rpx;
		font-family: PingFang SC-Semibold, PingFang SC;
		font-weight: 700;
		color: #202020;
		line-height: 32rpx;
	}
</style>
